<template>
  <div>
    <h2 ref="msg">{{msg}}</h2>
    <h2>msg2: {{msg2}}</h2>
    <button @click="test">测试</button>
  </div>
</template>

<script>
/* 
什么是Tick:
  取出队列中的一个回调任务到调用栈中执行就是一个tick
  一个事件回调是一个Tick
  一个事件回调后的所有更新DOM操作是一个Tick
  每次调用nextTick都是一个新的Tick
内部用一个数组callbacks存储
    包含一个所有DOM更新的watcher数组: watchers   () => {[watcher, watcher]}
    所有nextTick的回调
如果第一个是更新数据, callbacks的结构是:
  [watchers, nextTick1, nextTick2]
如果第一个是nextTick
  [nextTick1, watchers, nextTick2]
nextTick中用的是哪个异步技术呢?
  优先使用微任务 => 宏任务
  promise => MutationObserver => setImmediate => setTimeout
*/
export default {
  name: 'NextTick',
  data () {
    return {
      msg: 'abc',
      msg2: 'atguigu'
    }
  },

  methods: {
    test () {
      this.msg2 = 'xxx'
      // this.msg = 'xxx2'
      // this.msg = 'abc'
      // console.log(this.$refs.msg.innerHTML) // 真实DOM的更新是异步的 => 不能得到更新后的真实DOM

      this.$nextTick(() => { // 必须在数据更新后调用
        console.log(this.$refs.msg.innerHTML) // 能得到最新的真实DOM
      })
      this.msg = 'xxx2'
      this.$nextTick(() => { // 必须在数据更新后调用
        console.log(this.$refs.msg.innerHTML) // 能得到最新的真实DOM
      })
      this.msg = 'xxx3'
    }
  },

  watch: {
    msg (value) { // watch的回调在事件监听的回调执行完成后, 同步调用 ==> watch的回调在DOM更新前执行
      // console.log('watch', value)
    }
  }
}
</script>

<style scoped>

</style>
